<template>
    <div class="qilin-login">
        <div class="qilin-login-container">
            <div class="qilin-login-container-header">图书管理系统</div>
            <div class="qilin-login-container-box">
                <template v-if="isLogin">
                    <el-form :model="formLogin" :rules="formLoginRule" label-width="90"
                        key="formLoginRef" ref="formLoginRef" @keydown.enter="login()"
                    >
                        <el-form-item label="手机号" prop="phonenumber">
                            <el-input v-model="formLogin.phonenumber" placeholder="请输入手机号"
                                type="text"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formLogin.password" placeholder="请输入密码"
                                type="password" show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login()">登录</el-button>
                            <el-button type="default" @click="isLogin=false">先去注册</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-else>
                    <el-form :model="formRegister" :rules="formRegisterRule" label-width="100"
                        key="formRegisterRef" ref="formRegisterRef"
                    >
                        <el-form-item label="手机号" prop="phonenumber">
                            <el-input v-model="formRegister.phonenumber" placeholder="请输入手机号"
                                type="text"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formRegister.password" placeholder="请输入密码"
                                type="password" show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input v-model="formRegister.confirmPassword" placeholder="请确认密码"
                                type="password" show-password
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="role">
                            <el-select v-model="formRegister.role" placeholder="请选择角色">
                                <el-option label="学生" value="0"></el-option>
                                <el-option label="老师" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="register()">注册</el-button>
                            <el-button type="default" @click="isLogin=true">返回登录</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        // 验证手机号校验事件监听
        const validatePhonenumber=(rule,value,callback)=>{
            if(value){
                let pattern=/^((1[3456789]\d{9})|(0\d{2,3}-?\d{7,8}))$/;
                if(!pattern.test(value)){
                    callback("请输入正确格式的手机号");
                }else{
                    callback();
                };
            };
        };
        // 确认密码校验事件监听
        const validateConfirmPassword=(rule,value,callback)=>{
            if(!value){
                callback("请确认密码");
            }else{
                if(value === this.formRegister.password){
                    callback();
                }else{
                    callback("密码不一致");
                };
            };
        };
        return {
            isLogin:true, //是否在登录
            formLogin:{ //登录配置项
                phonenumber:"",
                password:""
            },
            formLoginRule:{ //登录校验配置项
                phonenumber:[
                    {
                        required:true,
                        message:"请输入手机号",
                        trigger:"blur"
                    },
                    {
                        validator:validatePhonenumber,
                        trigger:"blur"
                    }
                ],
                password:[
                    {
                        required:true,
                        message:"请输入密码",
                        trigger:"blur"
                    }
                ]
            },
            formRegister:{ //注册配置项
                phonenumber:"",
                password:"",
                confirmPassword:"",
                role:"0"
            },
            formRegisterRule:{ //注册校验配置项
                phonenumber:[
                    {
                        required:true,
                        message:"请输入手机号",
                        trigger:"blur"
                    },
                    {
                        validator:validatePhonenumber,
                        trigger:"blur"
                    }
                ],
                password:[
                    {
                        required:true,
                        message:"请输入密码",
                        trigger:"blur"
                    }
                ],
                confirmPassword:[
                    {
                        required:true,
                        message:"请确认密码",
                        trigger:"blur"
                    },
                    {
                        validator:validateConfirmPassword,
                        trigger:"blur"
                    }
                ]
            }
        }
    },
    methods:{
        // 点击登录按钮事件监听
        login(){
            this.$refs["formLoginRef"].validate((valid)=>{
                if(valid){
                    // console.log(this.formLogin);
                    this.$router.push("/index");
                    ElMessage({
                        message:"登录成功！",
                        type:"success"
                    });
                };
            });
        },
        // 点击注册按钮事件监听
        register(){
            this.$refs["formRegisterRef"].validate((valid)=>{
                if(valid){
                    // console.log(this.formRegister);
                    ElMessage({
                        message:"注册成功，请登录！",
                        type:"success"
                    });
                    this.isLogin=true;
                };
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.qilin-login{
    position:relative;
    @include QilinWidthHeight();
    @include QilinBgImage("~@/assets/images/image10.jpeg");
    >.qilin-login-container{
        width:420px;
        transform:translate(-50%,-50%);
        @include QilinPosition(absolute,40%,50%);
        >.qilin-login-container-header{
            color:$primary-text-color;
            width:100%;
            font-size:$huge-text-size;
            font-weight:bolder;
            text-align:center;
            letter-spacing:1px;
            padding:20px;
        }
        >.qilin-login-container-box{
            background-color:#fff;
            border-radius:5px;
            padding:20px;
            :deep(.el-form){
                padding:20px 20px 0 20px;
                >.qilin-item-isRemember{
                    >.el-form-item__content{
                        justify-content: flex-end;
                    }
                }
                >.qilin-button-item{
                    >.el-form-item__content{
                        margin-left:120px !important;
                        >.qilin-button{
                            width:50%;
                        }
                    }
                }
            }
            .qilin-login-content-box-tip{
                font-size:$small-text-size;
                padding:0 20px 0 20px;
                text-align:right;
                color:$invalid-color;
                >span:first-child{
                    color:$primary-text-color;
                    cursor:pointer;
                    font-weight:bolder;
                    text-decoration:underline;
                    margin-right:10px;
                }
                >span:last-of-type{
                    margin-left:5px;
                    color:$primary-text-color;
                    cursor:pointer;
                    font-weight:bolder;
                }
            }
        }
    }
}
</style>
